<template>
  <div class="designer-container">
    <el-button-group class="">
      <el-button type="primary" size="mini" @click="openUploadProcess">
        上传<i class="el-icon-upload2 el-icon--right" />
      </el-button>
      <el-button type="primary" size="mini">
        下载 <i class="el-icon-download el-icon--right" />
      </el-button>
    </el-button-group>
    <el-table :data="processLastVersionList">
      <el-table-column prop="processName" label="流程名称" />
      <el-table-column prop="processKey" label="流程key" />
      <el-table-column prop="deploymentTime" label="部署时间" />
      <el-table-column prop="version" label="当前版本" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="bottom">
            <el-button
              circle
              size="mini"
              type="primary"
              icon="el-icon-info"
              @click="viewProcessImage(scope.row)"
            />
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="编辑" placement="bottom">
            <el-button
              circle
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editProcess(scope.$index, scope.row)"
            />
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="bottom">
            <el-button
              circle
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteProcee(scope.$index, scope.row)"
            />
          </el-tooltip></template>
      </el-table-column>
    </el-table>
    <!--流程图home-->
    <el-dialog title="流程查看" :visible.sync="processImg" width="70%">
      <div class="block">
        <el-image
          :src="processImgUrl"
          style="float:right;"
        /></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="processImg = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--流程图end-->
    <!--流程上传home-->
    <el-dialog title="流程上传" :visible.sync="uploadProcess" width="50%">
      <div style="margin-top: 0px;">
        <el-input v-model="resPath" size="mini" placeholder="请输入内容" class="input-with-select">
          <el-select slot="prepend" v-model="resType" class="filter-item" size="mini" clearable placeholder="请选择资源类型">
            <el-option
              v-for="item in resTypes"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-input>
      </div>
      <div style="margin-top: 30px;"><hr></div>
      <div style="margin-top: 30px;">
        <el-upload
          class="upload-demo"
          ref="upload"
          drag
          action="http://dev.zglong.cn:9000/act-zglong/proManagement/deploy"
          multiple
          :auto-upload="false"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subUploadProcess">确 定</el-button>
      </span>
    </el-dialog>
    <!--流程上传end-->
  </div>
</template>

<script>
import { getProcessLastVersion, processImage, deleteByKey, deploy } from '@/api/myTask'
import { Message } from 'element-ui'

const resTypes = [
  { key: 'ZIP', value: 'zip' },
  { key: 'RESOURCE', value: 'resource' },
  { key: 'BPMN', value: 'bpmn' },
  { key: 'XML', value: 'xml' }
]
export default {
  name: 'Index',
  data() {
    return {
      processLastVersionList: '',
      processImg: false,
      processImgUrl: '',
      uploadProcess: false,
      resTypes,
      resType: 'bpmn',
      resPath: '1'

    }
  },
  created() {
    this.getProcess()
  },
  methods: {
    getProcess() {
      getProcessLastVersion().then(res => {
        if (res.success) {
          this.processLastVersionList = res.result
        } else {
          Message.success('系统异常')
        }
      })
    },
    viewProcessImage(row) {
      this.processImg = true
      processImage(row.processKey).then(res => {
        const url = window.URL.createObjectURL(res)
        this.processImgUrl = url
      })
    },
    openUploadProcess() {
      this.uploadProcess = true
    },
    subUploadProcess() {
      this.uploadProcess = false
      this.$refs.upload.submit()
      this.getProcess()
      Message.success('部署成功')

      // deploy(this.resType, JSON.stringify(this.resPath)).then(res => {
      //   if (res.success) {
      //     Message.success('部署成功')
      //     this.getProcess()
      //   } else {
      //     Message.error('部署成功')
      //   }
      // })
    },
    editProcess(index, row) {
      Message.warning('暂不支持')
    },
    deleteProcee(index, row) {
      this.$confirm('此操作将删除有关此流程得一切信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteByKey(row.processKey).then(res => {
            if (res.success) {
              Message.success('删除成功')
              this.getProcess()
            } else {
              Message.error('系统异常')
            }
          })
        })
    }
  }
}
</script>

<style scoped>

</style>
<style lang="scss">
  .designer {
    &-container {
      margin: 20px;
    }

    &-text {
      font-size: 20px;
      line-height: 30px;
    }
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
